import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component

// 全局注册这个组件   在任何组件中 都可以使用 svg-icon这个组件
Vue.component('svg-icon', SvgIcon)

// 1. require.context() 怎么使用
// 2. webpack 配置 svg-sprite-loader 生成雪碧图

// 1. require.context('导入文件的目录','是否递归获取','正则规则匹配指定的文件')
const req = require.context('./svg', false, /\.svg$/)
// console.log(req, 'req')
// req函数是用来根据指定的目录导入相应的文件
// const requireAll = requireContext => requireContext.keys().map(requireContext)
// requireAll(req)

function requireAll(req) {
  // requireContext==== req
  // console.log(req.keys(), 'req.keys()') // ['./chart.svg', './dashboard.svg', './example.svg', './eye-open.svg', './eye.svg', './form.svg', './link.svg', './nested.svg', './password.svg', './table.svg', './tree.svg', './user.svg']
  // req.keys().map(req) ===>req.keys().map(path => req(path))
  // req(文件的路径) ： 将文件路径所对应的文件导入到项目中---》再配合webpack结合svg-sprite-loader，
  // 将svg文件打包生成中一个一个symbol标签，然后将symbol放入到一个大svg中，再将svg放入body下面
  // req.keys().map(item => req(item))
  return req.keys().map(path => req(path))
}
requireAll(req)
